<template>
  <div class="divCont">
    <div class="lineChart">
      <LakerEcharts ref="lineChart" :option="dataOption" width="100%" height="100%" />
    </div>

    <div class="website_sczb">
      <div></div>
      <div>月度计划：{{ towNumber(dataModel['M0_yjhfdl']) }}</div>
      <div>全年累计：{{ towNumber(dataModel['M0_nfdl']) }}</div>
      <div>本月累计：{{ towNumber(dataModel['M0_yfdl']) }}</div>
      <div>昨日电量：{{ towNumber(dataModel['M0_rfdl']) }}</div>
      <div></div>
    </div>
    <table class="content-table">
      <tr>
        <td>单位：GJ</td>
        <td>实时</td>
        <td>昨日</td>
        <td>月度</td>
        <td>年度</td>
      </tr>
      <tr>
        <td>总供热量</td>
        <td class="content-year">
          {{
            towNumber(dataModel['1DCS_COM_RBGRL_GJ']) +
            towNumber(dataModel['1DCS_COM_DGLGRL_GJ']) +
            towNumber(dataModel['TFL_1005_SH0040_AALM1']) +
            towNumber(dataModel['TFL_1011_SH0082_AALM6'])
          }}
        </td>
        <td class="content-year">{{ towNumber(dayDataModel2.rwzgrlGj) }}</td>
        <td class="content-year">{{ towNumber(monthDataModel2.rwzgrlGj) }}</td>
        <td class="content-year">{{ towNumber(yearDataModel2.rwzgrlGj) }}</td>
      </tr>
      <tr>
        <td>主机供热量</td>
        <td class="content-year">0</td>
        <td class="content-year">{{ towNumber(dayDataModel2.zjgrlGj) }}</td>
        <td class="content-year">{{ towNumber(monthDataModel2.zjgrlGj) }}</td>
        <td class="content-year">{{ towNumber(yearDataModel2.zjgrlGj) }}</td>
      </tr>
      <tr>
        <td>热泵供热量</td>
        <td class="content-year">{{ towNumber(dataModel['1DCS_COM_RBGRL_GJ']) }}</td>
        <td class="content-year">{{ towNumber(dayDataModel2.rbgrlGj) }}</td>
        <td class="content-year">{{ towNumber(monthDataModel2.rbgrlGj) }}</td>
        <td class="content-year">{{ towNumber(yearDataModel2.rbgrlGj) }}</td>
      </tr>
      <tr>
        <td>电锅炉供热量</td>
        <td class="content-year">{{ towNumber(dataModel['1DCS_COM_DGLGRL_GJ']) }}</td>
        <td class="content-year">{{ towNumber(dayDataModel2.dglgrlGj) }}</td>
        <td class="content-year">{{ towNumber(monthDataModel2.dglgrlGj) }}</td>
        <td class="content-year">{{ towNumber(yearDataModel2.dglgrlGj) }}</td>
      </tr>
      <tr>
        <td>调峰炉供热量</td>
        <td class="content-year">{{ towNumber(dataModel['TFL_1005_SH0040_AALM1']) }}</td>
        <td class="content-year">{{ towNumber(dayDataModel2.sh0040Aalm2) }}</td>
        <td class="content-year">{{ towNumber(monthDataModel2.sh0040Aalm2) }}</td>
        <td class="content-year">{{ towNumber(yearDataModel2.sh0040Aalm2) }}</td>
      </tr>
      <tr>
        <td>燃气炉供热量</td>
        <td class="content-year">{{ towNumber(dataModel['TFL_1011_SH0082_AALM6']) }}</td>
        <td class="content-year">{{ towNumber(dayDataModel2.sh0082Aalm7) }}</td>
        <td class="content-year">{{ towNumber(monthDataModel2.sh0082Aalm7) }}</td>
        <td class="content-year">{{ towNumber(yearDataModel2.sh0082Aalm7) }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import sppApi from '@/api/spp'
import constant from './constant.ts'
import { dayjs } from 'element-plus'
import LakerEcharts from '@/components/lakerEcharts/index.vue'

export default {
  name: 'SppCenterTop',
  props: {
    data: { type: Object, default: () => {} }
  },
  components: { LakerEcharts },
  data() {
    return {
      dataOption: {
        backgroundColor: '',
        grid: {
          x: 50,
          y: 30,
          x2: 30,
          y2: 35,
          borderWidth: 0
        },
        animation: false,
        legend: {
          x: 'center',
          y: 'top',
          itemHeight: 18,
          data: ['全厂发电功率', '#1发电功率', '#2发电功率'],
          textStyle: {
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
            color: '#7AA8B5',
            padding: [20, 20, 0, 0]
          }
        },
        xAxis: [
          {
            type: 'category',
            nameTextStyle: {
              color: '#FFFFFF',
              fontFamily: 'Microsoft YaHei',
              fontSize: 12
            },
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#A1D5FA'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#A1D5FA',
                fontFamily: 'Microsoft YaHei',
                fontSize: 12
              }
            },
            axisTick: {
              length: 0
            },
            splitLine: {
              show: false
            },
            data: constant.timeArray
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：MW',
            nameTextStyle: {
              color: '#FFFFFF',
              fontFamily: 'Microsoft YaHei',
              fontSize: 12
            },
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#A1D5FA',
                fontFamily: 'Microsoft YaHei',
                fontSize: 12
              }
            },
            splitLine: {
              lineStyle: {
                color: ['#A1D5FA'],
                width: 1,
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#A1D5FA'
              }
            }
          }
        ],
        series: [
          {
            name: '全厂发电功率',
            type: 'line',
            data: [0],
            smooth: true
          },
          {
            name: '#1发电功率',
            type: 'line',
            data: [1],
            smooth: true
          },
          {
            name: '#2发电功率',
            type: 'line',
            data: [2],
            smooth: true
          }
        ],
        color: ['#43c628', '#F2A602', '#1BD8F5'],
        symbolList: ['circle']
      },
      dataModel: {
        M0_yjhfdl: 0,
        M0_nfdl: 0,
        M0_yfdl: 0,
        M0_rfdl: 0,
        '1DCS_COM_RELIANGCHA': 0,
        '1DCS_COM_J0NDA10CT150': 0, //1
        '1DCS_COM_J0NDA10CP150': 0, //1
        '1DCS_COM_J0NDA10CF150_SIS': 0, //1
        '1DCS_COM_J0NDB10CT150': 0,
        '1DCS_COM_J0NDB10CP150': 0,
        '1DCS_COM_J0NDB10CF150_SIS': 0,
        '1DCS_COM_XRWSHRL': 0,
        '1DCS_COM_XRWGSWD': 0, //1
        '1DCS_COM_XRWGSYL': 0, //1
        '1DCS_COM_XRWGSLL_SIS': 0, //1
        '1DCS_COM_XRWHSWD': 0,
        '1DCS_COM_XRWHSYL': 0,
        '1DCS_COM_XRWHSLL_SIS': 0,
        '1DCS_COM_RBGRL_GJ': 0,
        TFL_1001_RT040301: 0,
        TFL_1003_RT040301: 0,
        TFL_1005_SH0041_AALM1: 0,
        TFL_1005_SH0042_AALM1: 0,
        '1DCS_COM_01A4AP027': 0,
        '1DCS_COM_02C4AP027': 0,
        '1DCS_COM_ZLFA13CT302': 0,
        '1DCS_COM_ZLFA23CT302': 0,
        '1DCS_COM_01RWSSHRL': 0,
        '1DCS_COM_02RWSSHRL': 0,
        '1DCS_COM_03RWSSHRL': 0,
        '1DCS_COM_04RWSSHRL': 0,
        TFL_1011_SH0011_AALM13: 0,
        TFL_1012_SH0011_AALM13: 0,
        TFL_1011_SH0082_AALM1: 0,
        TFL_1012_SH0082_AALM1: 0,
        TFL_1013_SH0012_AALM13: 0,
        TFL_1013_SH0082_AALM1: 0
      },
      dayDataModel2: {
        rwzgrlGj: 0,
        zjgrlGj: 0,
        rbgrlGj: 0,
        dglgrlGj: 0,
        sh0040Aalm2: 0,
        sh0082Aalm7: 0
      },
      monthDataModel2: {
        rwzgrlGj: 0,
        zjgrlGj: 0,
        rbgrlGj: 0,
        dglgrlGj: 0,
        sh0040Aalm2: 0,
        sh0082Aalm7: 0
      },
      yearDataModel2: {
        rwzgrlGj: 0,
        zjgrlGj: 0,
        rbgrlGj: 0,
        dglgrlGj: 0,
        sh0040Aalm2: 0,
        sh0082Aalm7: 0
      }
    }
  },
  watch: {
    data(newValue) {
      Object.assign(this.dataModel, newValue)
    }
  },
  mounted() {
    this.initData()
    this.initHeatData2()
  },
  methods: {
    initData() {
      let xdata = [[], []]
      let params = {
        tagNames: ['HY_0_003', '1dcs_selmw', '2dcs_selmw'],
        interVal: 5
      }
      let maxLength = 0
      sppApi.getLoadCurve(params).then((res) => {
        if (res.code === 200) {
          for (let j = 0; j < res.data.length; j++) {
            let a = []
            for (let i = 0; i < res.data[j].length; i++) {
              a[res.data[j][i].indexValue] = res.data[j][i].avgValue
            }
            xdata[j] = a
            if (xdata[j].length > maxLength) {
              maxLength = xdata[j].length
            }
          }
          for (let i = 0; i < xdata.length; i++) {
            let len = xdata[i].length
            for (let j = xdata[i].length; j < maxLength; j++) {
              xdata[i].push(xdata[i][len - 1])
            }
            for (let j = 1; j < xdata[i].length; j++) {
              if (xdata[i][j] == null) {
                xdata[i][j] = xdata[i][j - 1]
              }
            }
          }
          this.dataOption.series = [
            {
              name: '全厂发电功率',
              type: 'line',
              data: xdata[0],
              smooth: true
            },
            {
              name: '#1发电功率',
              type: 'line',
              data: xdata[1],
              smooth: true
            },
            {
              name: '#2发电功率',
              type: 'line',
              data: xdata[2],
              smooth: true
            }
          ]
        }
      })
    },
    initHeatData2() {
      let params = { heatingDate: dayjs().format('YYYY-MM-DD') }
      sppApi.getHeating(params).then((res) => {
        if (res.code === 200) {
          this.yearDataModel2.rwzgrlGj = res.data.rwzgrlYear
          this.yearDataModel2.zjgrlGj = res.data.zjgrlYear
          this.yearDataModel2.rbgrlGj = res.data.rbgrlYear
          this.yearDataModel2.dglgrlGj = res.data.dglgrlYear
          this.yearDataModel2.sh0040Aalm2 = res.data.sh0040Year
          this.yearDataModel2.sh0082Aalm7 = res.data.sh0082Year

          this.monthDataModel2.rwzgrlGj = res.data.rwzgrlMonth
          this.monthDataModel2.zjgrlGj = res.data.zjgrlMonth
          this.monthDataModel2.rbgrlGj = res.data.rbgrlMonth
          this.monthDataModel2.dglgrlGj = res.data.dglgrlMonth
          this.monthDataModel2.sh0040Aalm2 = res.data.sh0040Month
          this.monthDataModel2.sh0082Aalm7 = res.data.sh0082Month

          this.dayDataModel2.rwzgrlGj = res.data.rwzgrlGj
          this.dayDataModel2.zjgrlGj = res.data.zjgrlGj
          this.dayDataModel2.rbgrlGj = res.data.rbgrlGj
          this.dayDataModel2.dglgrlGj = res.data.dglgrlGj
          this.dayDataModel2.sh0040Aalm2 = res.data.sh0040Aalm2
          this.dayDataModel2.sh0082Aalm7 = res.data.sh0082Aalm7
        }
      })
    },
    initLoadData() {
      sppApi.getLoadCurveByRedis().then((res) => {
        if (res.code === 200) {
          this.dataModel = res.data
        }
      })
    },
    towNumber(val) {
      if (!val) return 0.0
      let val2 = isNaN(val) ? 0.0 : Math.round(val * 100) / 100

      return val2 < 0 ? 0.0 : val2
    }
  }
}
</script>
<style scoped lang="scss">
.divCont {
  width: 100%;
  height: 99%;
}
.lineChart {
  padding-top: 10px;
  width: 100%;
  height: 55%;
}
.website_sczb {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 5px;
}
.website_sczb div {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
}

.content-table {
  padding-top: 15px;
  margin: 0 20px;
  text-align: center;
  width: 95%;
  height: 30%;
  border-collapse: collapse;
  th,
  tr,
  td {
    width: 8.3%;
    border: 1px solid #147dcf;
    text-align: center;
    font-size: 12px;
    .content-year {
      color: gold;
    }
    .content-title {
      color: chartreuse;
    }
  }
}
.title {
  width: 100%;
  text-align: center;
  color: chartreuse;
  font-size: 20px;
}
</style>
